<template>
  <div class="">
	<!-- 引入菜单组件 -->
	<vNavlist />
	<!-- 学生数据 -->
	<div class="student">
		<p class="title">学生数据{{this.$route.query.id}}</p>	
	</div>
  </div>
</template>

<script>
import vNavlist from "@/components/vNavlist.vue"
export default {
	name: 'vStudent',
	mounted(){
		this.zhu()
	},
	components:{
		vNavlist
	},
	data () {
		return {
		}
	},
	methods:{
		zhu(){
			let svg = d3.select('.student').append('svg').attr('width',700).attr('height',400);
			let g = svg.append('g').attr('transform','translate(30,30)');
			
			let data = [15,18,25,10,45,35,40,35,60,35];
			
			// 定义比例尺
			let scaleX = d3.scale.ordinal().domain(d3.range(data.length)).rangeRoundBands([0,600],0.1,0.1);
			let scaleY = d3.scale.linear().domain([0,d3.max(data)]).range([350,0])
			
			// 添加柱状图
			g.selectAll('rect').data(data).enter()
				.append('rect')
				.attr('x',(d,i)=>{
					return scaleX(i)
				})
				.attr('y',(d,i)=>{
					return scaleY(d)
				})
				.attr('width',(d,i)=>{
					return scaleX.rangeBand();
				})
				.attr('height',(d,i)=>{
					return 350-scaleY(d);
				})
				.attr('fill','steelblue')
				.on('mouseover',function(){
					d3.select(this).attr('fill','yellow')
				})
				.on('mouseout',function(){
					d3.select(this).transition().duration(500).attr('fill','steelblue')
				})
			// 添加文本
			g.selectAll('text').data(data).enter()
				.append('text')
				.attr('x',(d,i)=>{
					return scaleX(i)
				})
				.attr('y',(d,i)=>{
					return scaleY(d)
				})
				.attr('dx',(d,i)=>{
					return 15
				}).attr('dy',(d,i)=>{
					return 20
				})
				.attr('fill','white')
				.text((d)=>{return d})
				
			// 添加坐标
			let x = d3.svg.axis().scale(scaleX);
			let y = d3.svg.axis().scale(scaleY).orient('left');
			
			g.append('g').attr('class','axis').call(x).attr('transform','translate(0,350)')
			g.append('g').attr('class','axis').call(y)
		}
	}
}
</script>;

let data = [15,18,25,10,45,35,40,35,60,35];

<style>
	.student{
		height: 500px;
		margin: 50px 10px;
		position: relative;
		background: #DDD;
	}
	.title{
		border-bottom: 4px solid white;
		line-height: 40px;
		font-weight: bold;
	}
	.axis line,.axis path{
		fill: none;
		stroke: black;
	}
	svg{
		position: absolute;
		top: 40px;
		bottom:0;
		left: 0;
		right: 0;
		margin: auto;
	}
</style>
